<template>
  <top-nav :message="viewMessage"></top-nav>
  <div class="phoneNumber">
    <p>手机号码：</p>
    <input type="text" pattern="[0-9]{11}" v-model="this.loginInfo.name">
  </div>
  <div class="password">
    <p>密码：</p>
    <input type="password" v-model="this.loginInfo.password">
  </div>
  <button class="login" @click="toHome">登录</button>
  <button class="enroll" @click="toEnroll">去注册</button>
  <bottom-nav></bottom-nav>
</template>

<script>
import TopNav from "@/components/TopNav.vue";
import request from "@/request";
import qs from "qs";
import {isEmpty, setSessionStorage} from "@/util/common";

export default {
  name:"LoginView",
  components:{
    TopNav,
  },
  data(){
    return{
      viewMessage:"用户登录",
      loginInfo:{
        name:null,
        password:null,
      },
    }
  },
  methods:{
    toHome(){
      // if(isEmpty(this.loginInfo.phone) || isEmpty(this.loginInfo.password)){
      //   confirm("账号或者密码不能为空！");
      //   return;
      // }
      request({
        method:"post",
        url:"/customer-service/customer/login",
        data:qs.stringify(this.loginInfo)
      }).then((respData) => {
        if(respData.code == 200){
          this.$store.commit("setCustomerInfo",respData.data);
          setSessionStorage("customerInfo",respData.data);
          this.$router.replace({path:"/home"})
        }else{
          confirm(respData.msg);
        }
      }).catch((error) => {
        console.error(error)
      })
    },
    toEnroll(){
      this.$router.push({path:"/register"});
    }
  },
}
</script>

<style scoped>
/*
  :focus伪类，获得焦点的时候
  去除input边框
*/
input:focus{
  outline: none;
}
input{
  border: none;
  font-size: 3vw;
  width: 81%;
}
.phoneNumber{
  width: 94%;
  display: flex;
  justify-content: space-between;
  color: gray;
  margin: 5vw auto;
  font-size: 3vw;
  font-weight: bold;
}
.password{
  width: 94%;
  display: flex;
  justify-content: space-between;
  color: gray;
  margin: 5vw auto 2vw auto;
  font-size: 3vw;
  font-weight: bold;
}
.login{
  width: 94%;
  height: 10vw;
  background-color: #38CA73;
  border: none;
  border-radius: 4px;
  margin: 2% 3%;
  color: white;
  font-size: 3.8vw;
  font-weight: bold;
}
.enroll{
  height: 10vw;
  width: 94%;
  background-color: #EEEEEE;
  border: none;
  border-radius: 4px;
  margin: 2% 3%;
  color: gray;
  font-size: 3.8vw;
  font-weight: bold;
}
</style>